<!--
 * @Description: 版本升级
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-06 16:14:18
 * @LastEditTime: 2021-11-15 14:36:01
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content" style="padding: 0">
    <el-alert :title="'文件路径：' + filesList.path" type="info" show-icon></el-alert>
    <div class="file-box">
      <table v-if="filesList.files && filesList.files.length > 0">
        <thead>
          <tr>
            <th>文件</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in filesList.files" :key="index">
            <td>
              <i class="iconfont">&#xe6f1;</i>
              {{item}}
            </td>
            <td>
              <el-button
                type="text"
                icon="el-icon-switch-button"
                @click="handleUp(item)"
                v-power="ne.dgId === 100000 ? 0 : 2"
              >升级</el-button>
              <el-button
                type="text"
                style="color:rgb(103, 194, 58)"
                icon="el-icon-check"
                @click="confirmUpdate(item)"
                v-power="ne.dgId === 100000 ? 0 : 2"
              >确定</el-button>
            </td>
          </tr>
        </tbody>
      </table>
      <el-alert v-else type="warning" show-icon title="服务器文件路径下，无可用的升级文件！"></el-alert>
    </div>
  </div>
</template>

<script>
export default {
  props: ['ne'],
  data () {
    return {
      filesList: [],
      isRunning: false
    };
  },
  created () {
    this.files();
  },
  methods: {
    // 获取文件
    files () {
      let _this = this;
      let params = {
        commandCode: 'maintenance.versionFile.get'
      };
      _this.$http.post({
        url: '/api/resource/nemng/command/' + _this.ne.id,
        data: params
      }).then(res => {
        _this.filesList = res;
      });
    },
    // 确定升级
    handleUp (file) {
      let _this = this;
      this.$confirm('您确定要升级当前设备版本吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          commandCode: 'maintenance.versionFile.set',
          paras: {
            fileName: file
          }
        };
        _this.$http.post({
          url: '/api/resource/nemng/command/' + _this.ne.id,
          data: params
        }).then(res => {
          _this.$message.success('升级命令下发成功，请耐心等待！');
        });
      }).catch(() => {
        _this.$message.info('取消升级');
      });
    },
    // 虚拟升级 下发命令
    confirmUpdate () {
      let _this = this;
      setTimeout(() => {
        _this.$message.success('版本升级成功！');
      }, 3000);
    },
  }
};
</script>
<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  .file-box {
    width: 100%;
    overflow: auto;
    margin: 10px 0;
    table {
      width: 100%;
      th {
        line-height: 23px;
        padding: 10px;
        background: rgb(248, 248, 249);
        color: rgb(102, 102, 102);
        border: 1px solid #ebeef5;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
      }
      th:first-child {
        min-width: 500px;
        text-align: left;
      }
      th:last-child {
        width: 160px;
        min-width: 100px;
      }
      td {
        line-height: 23px;
        padding: 10px;
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        border: 1px solid #ebeef5;
        text-align: left;
        i {
          margin-right: 10px;
        }
      }
      td:last-child {
        text-align: center;
        ::v-deep .el-button {
          padding: 0;
        }
      }
    }
  }
}
@media only screen and (max-width: $device-ipad) {
  table {
    width: 500px;
    overflow-x: auto;
  }
}
</style>